import React, { Suspense } from 'react';
import { formatMessage } from 'umi-plugin-react/locale';
import PageLoading from '@/components/PageLoading';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { Button, Card, Col, Row, Menu, Modal, message, Pagination, List, Input, Divider } from 'antd';
import { connect } from 'dva';
import AuthorizationAddModal from '@/pages/Account/authManage/authorizationAddModal';
import moment from 'moment';
import BackRouter from '@/pages/robotManagement/backRouter';
import { getUserRoleList, removeUserAuth, postUserAuth, getUserAuthList } from "@/services/user";
import { AuthUserList } from '@/utils/CommonComponent';

const { confirm } = Modal;

class AuthorizationList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      accountType: 'SP',
    }
  }

  componentDidMount() {
    this.AuthUser.getList()
  }

  handleClick = e => {
    const accountType = e.key
    this.setState({ accountType }, this.AuthUser.getList())
  }

  render() {
    const { location: { query: { authId } } } = this.props;
    const { accountType } = this.state;

    return (
      <Suspense fallback={<PageLoading />}>
        <PageHeaderWrapper>
          <Card bordered={false} style={{ height: '100%' }}>
            <div style={{width:'70%'}}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <sapn style={{ fontSize: '18px', fontWeight: 'bold', color: '#000' }}>{formatMessage({ id: 'account.authManage.authorizationList.roleAuthorization' })}</sapn>
                <BackRouter pathname='/authManage'></BackRouter>
              </div>
              <Divider style={{ margin: '20px 0px 0px', background: '#d4d4d4' }} />
              <Menu onClick={this.handleClick} selectedKeys={[ accountType ]} mode="horizontal">
                <Menu.Item key={'SP'}>{formatMessage({ id: 'account.authManage.authorizationList.serviceProviderUser' })}</Menu.Item>
                <Menu.Item key={'APP'}>{formatMessage({ id: 'account.authManage.authorizationList.enterpriseUser' })}</Menu.Item>
              </Menu>
              <AuthUserList onRef={ref => this.AuthUser = ref} accountType={accountType} targetId={authId} pageSource="role" />
            </div>
          </Card>
        </PageHeaderWrapper>
      </Suspense>
    )
  }
}


export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(AuthorizationList);
